<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单管理</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
<link rel="stylesheet" href="__PUBLIC__/admin/css/admin.css">
<link rel="stylesheet" type="text/css"
	href="__PUBLIC__/admin/css/font-awesome.min.css">
</head>
<body class="layui-bg-gray">
	<div class="layui-fluid">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md3 layui-col-xs6">
				<div class="layui-card">
					<div class="layui-card-header">菜单结构</div>
					<div class="layui-card-body">
						<ul id="menus"></ul>
					</div>
				</div>
			</div>
			<div class="layui-col-md9 layui-col-xs6">
				<div class="layui-card">
					<div class="layui-card-header">菜单列表</div>
					<div class="layui-card-body">
						<button id="addBtn"
							class="layui-btn layui-btn-primary layui-btn-sm">
							<i class="fa fa-plus-circle"></i> 添加菜单
						</button>
						<table id="menu-table" lay-filter="menu-table"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="__PUBLIC__/layui/layui.js"></script>
	<script type="text/javascript"
		src="__PUBLIC__/common/js/jquery-2.0.3.min.js"></script>
	<script type="text/javascript">
		function initTree() {
			var cache = layui.data('cache');
			$.ajax({
				type : "POST",
				url : "{:U('Settings/ajaxMenus')}",
				data : {
					token : cache.token
				},
				success : function(res) {
					layui.use('tree', function() {
						layui.tree({
							elem : '#menus',
							nodes : res,
							click : function(node) {
								if (node.level < 3) {
									console.log(node);
									initTable(node.id);
								}
							}
						});
					});
				}
			});
		}
		function initTable(pid) {
			layui.use([ 'table' ], function() {
				var table = layui.table;
				table.render({
					elem : '#menu-table',
					url : "{:U('Settings/menu')}",
					method : "POST",
					page : {
						layout : [ 'prev', 'page', 'next', 'skip', 'count' ]
					},
					where : {
						pid : pid
					},
					text : {
						none : '无菜单记录'
					},
					cols : [ [ {
						field : 'sort_order',
						title : '排序'
					}, {
						field : 'menu_name',
						title : '菜单名称'
					}, {
						field : 'module',
						title : '模块'
					}, {
						field : 'action',
						title : '方法'
					}, {
						title : "操作",
						fixed : 'right',
						align : 'center',
						toolbar : '#barTool',
					} ] ]
				});
				table.on('tool(menu-table)', function(obj) {
					var data = obj.data;
					var layEvent = obj.event;
					if (layEvent === 'edit') {
						parent.layer.open({
							type : 2,
							title : "修改菜单",
							area : [ '500px', '80%' ],
							content : "{:U('Settings/editMenu')}?nid="
									+ data.id,
							cancel : function(index, layero) {
								var cache = layui.data('cache');
								var status = cache.status;
								layui.data('cache', {
									key : 'status',
									value : null
								});
								if (status) {
									location.reload();
								}
							}
						});
					} else if (layEvent === 'del') {
						parent.layer.confirm('确认删除吗？', {
							title : '提示'
						}, function(index) {
							//obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
						});
					}
				});
			});
		}
		$(function() {
			initTree();
			initTable(0);
			$("#addBtn").click(function() {
				parent.layer.open({
					type : 2,
					title : "添加菜单",
					area : [ '500px', '80%' ],
					content : "{:U('Settings/addMenu')}",
					cancel : function(index, layero) {
						var cache = layui.data('cache');
						var status = cache.status;
						layui.data('cache', {
							key : 'status',
							value : null
						});
						if (status) {
							location.reload();
						}
					}
				});
			});
		});
	</script>
	<script type="text/html" id="barTool">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</body>
</html>